<!--
   
   Copyright (c) 2017, the Perspective Authors.
   
   This file is part of the Perspective library, distributed under the terms of
   the Apache License 2.0.  The full license can be found in the LICENSE file.

-->

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script src="http://localhost:8080/node_modules/perspective-viewer/dist/umd/perspective-viewer.js"></script>
    <script src="http://localhost:8080/node_modules/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
    <script src="http://localhost:8080/node_modules/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
    <script src="http://localhost:8080/node_modules/perspective/dist/umd/perspective.js"></script>

    <link rel='stylesheet' href="http://localhost:8080/node_modules/perspective-viewer/dist/umd/material-dense.css">

    <style>
        perspective-viewer{position:absolute;top:0;left:0;right:0;bottom:0;}
    </style>

</head>

<body>
    <perspective-viewer 
        id="viewer">
    
    </perspective-viewer>

    <script>

        window.addEventListener('WebComponentsReady', async function() {

            /**
             * `perspective.websocket` connects to a remote Perspective server
             * that accepts WebSocket connections at the specified URL.
             * 
             * Use `perspective.websocket` to set up Perspective in server or
             * distributed modes.
             */
            const websocket = perspective.websocket("ws://localhost:8080/websocket");

            /**
             * This shows Perspective running in "distributed mode": a `Table`
             * is present on the Python server AND in the browser client, and
             * state is automatically synchronized between the two.
             * 
             * To create a Perspective client running in "distributed mode",
             * host a `View` in the Python server and create a `Table` in the
             * client using a proxy to the hosted `View`.
             */
            const worker = perspective.worker();

            /**
             * `view` is a proxy to the hosted `View` in the Python server. All
             * public API methods are available through this proxied view.
             */
            const view = websocket.open_view('view_one');

            /**
             * When a `View` is passed into `table()` to create a new `Table`,
             * it automatically sets up an `on_update` callback to synchronize
             * the state of the server and client.
             * 
             * `const table` is a local Perspective `Table` that runs in
             * WebAssembly, with its state kept in sync through the WebSocket
             * connection. If the WebSocket connection closes/times out, the
             * `Table` and its data (and associated viewer) are still fully
             * functional, but will not be kept up-to-date with server state.
             * 
             * For a more complex example of manually controlling state
             * synchronization between server and client, see
             * `client_server_editing.html`.
             */
            const table = worker.table(view);
            
            // Load the local table in the `<perspective-viewer>`.
            document.getElementById('viewer').load(table);
        });

    </script>

</body>

</html>